<template>
  <div class="table-box">
    <ProTable
      ref="proTableRef"
      :title="$t('message.menuInfo.title')"
      :columns="columns"
      row-key="id"
      :request-api="menuApi.getMenuTree"
      :data-callback="dataCallback"
      :pagination="false"
    >
      <template #tableHeader>
        <el-button size="default" type="success" class="ml10" @click="onOpenAddMenu()" v-auth="'system:menu:add'">
          <el-icon>
            <CirclePlus />
          </el-icon>
          {{ $t("message.menuButton.add") }}
        </el-button>
      </template>
      <template #operation="scope">
        <el-space>
          <el-button
            size="small"
            text
            type="primary"
            :icon="CirclePlus"
            @click="onOpenAddMenu(scope.row)"
            v-auth="'system:menu:add'"
          >
            {{ $t("message.commonBtn.add") }}
          </el-button>
          <el-button
            size="small"
            text
            type="primary"
            :icon="Edit"
            @click="onOpenEditMenu(scope.row)"
            v-auth="'system:menu:update'"
          >
            {{ $t("message.commonBtn.edit") }}
          </el-button>
          <el-button
            size="small"
            text
            type="danger"
            :icon="Delete"
            @click="onTabelRowDel(scope.row)"
            v-auth="'system:menu:delete'"
          >
            {{ $t("message.commonBtn.delete") }}
          </el-button>
        </el-space>
      </template>
    </ProTable>
    <MenuDialog ref="menuDialogRef" @refresh="handleQuery()" :dict-data="state.dictData" />
  </div>
</template>

<script setup lang="tsx" name="systemMenu">
import { defineAsyncComponent, ref, reactive, watchEffect } from "vue";
import { ElMessageBox } from "element-plus";
import { feature } from "@/utils/axios-utils";
import { SysMenu, DictData } from "@/api-services/models/system";
import menuApi from "@/api-services/apis/system/menuApi";
import dictDataApi from "@/api-services/apis/system/dictDataApi";
import { ColumnProps } from "@/components/ProTable/interface";
import ProTable from "@/components/ProTable/index.vue";
import { UnifyResult } from "@/api-services/unifyResult";
import { CirclePlus, Edit, Delete } from "@element-plus/icons-vue";
import { useI18n } from "vue-i18n";
import { NotificationError, NotificationSuccess } from "@/utils/notification";
// 引入组件
const MenuDialog = defineAsyncComponent(() => import("@/views/system/menu/component/editMenu.vue"));

const { t } = useI18n();
const proTableRef = ref();
// 定义变量内容
const menuDialogRef = ref();
const state = reactive({
  menuData: [] as Array<SysMenu.SysMenuInfo>,
  dictData: [] as Array<DictData.SysDictData> //字典数据
});
const queryMenuType = async () => {
  const res = await dictDataApi.getDatalistByType("MenuType");
  state.dictData = res.data.data ?? [];
};
// 页面加载时
watchEffect(() => {
  queryMenuType();
});
//数据回显处理
const dataCallback = (queryRes: UnifyResult<Array<SysMenu.SysMenuInfo>>) => {
  const data = queryRes.data;
  state.menuData = data;
  return data;
};
const columns: ColumnProps<SysMenu.SysMenuInfo>[] = [
  { prop: "title", label: t("message.menuInfo.title"), search: { el: "input", key: "name", props: { placeholder: "菜单名称" } } },
  { prop: "path", label: t("message.menuInfo.path") },
  { prop: "component", label: t("message.menuInfo.component") },
  { prop: "name", label: t("message.menuInfo.name") },
  {
    prop: "menuType",
    label: t("message.menuInfo.menuType"),
    render: scope => {
      const data = state.dictData.filter(item => item.value == scope.row.menuType)[0];
      return (
        <el-tag size={data.tagSize} type={data.tagType}>
          {data?.name}
        </el-tag>
      );
    }
  },
  { prop: "sortCode", label: t("message.menuInfo.sortCode") },
  { prop: "operation", label: t("message.commonBtn.oper"), fixed: "right" }
];

const handleQuery = async () => {
  proTableRef.value?.getTableList();
};
// 打开新增菜单弹窗
const onOpenAddMenu = (row?: SysMenu.SysMenuInfo) => {
  menuDialogRef.value.openDialog("add", row);
};
// 打开编辑菜单弹窗
const onOpenEditMenu = (row: SysMenu.SysMenuInfo) => {
  menuDialogRef.value.openDialog("edit", row);
};
// 删除当前行
const onTabelRowDel = (row: SysMenu.SysMenuInfo) => {
  ElMessageBox.confirm(`${t("message.menuAlter.isDeleteMenu")}"${row.title}" [${row.path}]?`, t("message.commontInfo.info"), {
    confirmButtonText: t("message.orgAlter.confirm"),
    cancelButtonText: t("message.orgAlter.cancel"),
    type: "warning"
  })
    .then(async () => {
      const [err] = await feature(menuApi.delete({ id: row.id }));
      if (err) {
        NotificationError(err.message);
      } else {
        NotificationSuccess(t("message.menuAlter.deleteSuccess"));
        handleQuery();
      }
    })
    .catch();
};
</script>
